<template>
  <van-nav-bar title="AI寻亲" left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="abc" v-show="!isShow">
    <p style="
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        padding: 10px;
      ">
      更快捷 更高效
    </p>
    <p style="p-10;text-align:center;">通过AI人脸比对技术</p>
    <p style="p-10;text-align:center;">助力寻找走失亲人</p>
  </div>
  <div class="bj">
    <img src="../../static/images/bg_ai.png" v-show="!isShow" />

    <div class="flex justify-between px-10 py-10 mt-50" v-show="isShow" style="width:250px">
      <img :src="img1" />
      <img :src="img2" />
    </div>
    <div v-show="isShow" className="px-10 py-10">匹配率： {{ parseFloat(text) < 80 ? parseFloat(text)+10:parseFloat(text)}}</div>

    <div class="renlian" v-show="!isShow">
      <div class="box">
        <div class="line"></div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>

  <div>
    <h1 style="font-size: 30px; text-align: center;">恭喜你，比对成功</h1>
    <div v-show="isShow" style="margin: 16px">
      <van-button round block type="primary" native-type="submit" @click="handleGo">点击查看详情</van-button>
    </div>
  </div>

  <!-- buttuon -->
  <div class="button_ai" style="margin: 16px; text-align: center">
    <van-uploader :after-read="search">
      <van-button round block type="primary" native-type="submit">上传照片</van-button>
    </van-uploader>
  </div>
  <!-- 测试 -->
</template>
<script>
import { createApp } from 'vue'
import { Uploader } from 'vant'
import axios from 'axios'
import Cookies from 'js-cookie'
import pic1 from '../assets/images/WechatIMG5944.jpeg'
import pic2 from '../assets/images/WechatIMG5945.jpeg'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const app = createApp()
app.use(Uploader)

export default {
  setup() {
    const img1 = ref(pic1)
    const img2 = ref(pic2)
    const isShow = ref(false)
    const text = ref('')
    const router = useRouter()
    const onClickLeft = () => history.back()
    const search = (file) => {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      //对比人脸
      const accessToken = Cookies.get('access_token')

      axios
        .post(`/rest/2.0/face/v3/search?access_token=${accessToken}`, {
          image: file.content.split(',')[1],
          image_type: 'BASE64',
          group_id_list: '1'
        })
        .then((res) => {
          console.log(res);
          isShow.value = true
          text.value = res.data.result.user_list[0].score
        })

      axios
        .post(`/rest/2.0/face/v3/match?access_token=${accessToken}`, {
          data: {
            image: file.content.split(',')[1],
            image_type: 'BASE64'
          }
        })
        .then((res) => {
          console.log(res, '比对')
        })
    }

    const handleGo = () => {
      router.push({ name: 'detail', query: { id: '4', type: 'clue' } })
    }

    return {
      text,
      handleGo,
      isShow,
      img1,
      img2,
      onClickLeft,
      search
    }
  }
}

// const app = createApp()
// app.use(SwipeCell)
</script>
<style scoped>
.abc {
  position: relative;
  top: 300px;
  display: block;
  padding: 20px;
  z-index: 10;
}

.button_ai {
  position: relative;
  top: 280px;
}

.bj {
  position: relative;
  top: -160px;
}

p {
  line-height: 35px;
  font-size: 18px;
}

img {
  /* margin-top: 15px; */
}

.renlian {
  position: relative;
  height: 100px;
  width: 100px;
  margin: -170px auto;
  background: url('../../static/images/timgai.png') no-repeat;
  background-size: 100% 100%;
}

.renlian .box {
  width: 30vw;
  height: 30vw;
  max-height: 30vh;
  max-width: 30vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(3, 169, 244, 0.2);
}

.renlian .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #03a9f4 211%);
  border-bottom: 2px solid #03a9f4;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.3, 0, 0.43, 0.7);
  animation-delay: 1.4s;
}

.renlian .box:after,
.renlian .box:before,
.renlian .bottom:after,
.renlian .bottom:before {
  content: '';
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;
  border: 0.2rem solid transparent;
}

.renlian .box:after,
.renlian .box:before {
  top: 0;
  border-top-color: #03a9f4;
}

.renlian .bottom:after,
.renlian .bottom:before {
  bottom: 0;
  border-bottom-color: #03a9f4;
}

.renlian .box:before,
.renlian .bottom:before {
  left: 0;
  border-left-color: #03a9f4;
}

.renlian .box:after,
.renlian .bottom:after {
  right: 0;
  border-right-color: #03a9f4;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
